<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>CSS Test: A transition is not started when the computed value of a property changes as a result of declarative animation.</title>
        <link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
        <link rel="help" href="http://www.w3.org/TR/css3-transitions/#starting" />
        <meta name="flags" content="animated dom" />
        <meta name="assert" content="A transition is not started when the computed value of a property changes as a result of declarative animation." />
        <style type="text/css">
            @keyframes testAnimation
            {
                from{left: 5px;}
                to{left: 400px;}
            }
            #numEvents
            {
                position: relative;
                top: 70px; 
            }
            #animationEnd
            {
                background-color: orange;
                height: 50px;
                left: 400px;
                position: absolute;
                width: 50px;
            }
            #testDiv
            {
                height: 50px;
                left: 5px;
                position: absolute;
                background-color: blue;
                transition-property: left;
                transition-duration: 4s;
                animation-duration: 4s;
                width: 50px;
            }
        </style>
        <script type="text/javascript">
            var VARIANCE_ALLOWED = 100; //The allowable variance in transition delay and duration (ms).
            var count = 0;

            function printCount()
            {
                var numEvents = document.getElementById("numEvents");
                numEvents.innerHTML = numEvents.innerHTML + count;
                numEvents.value = numEvents.value + count;
            }

            function transitionEvent_start()
            {
                ++count;
            }
             
            function startTest()
            {

                document.body.offsetWidth;
                var element = document.getElementById("testDiv");
                
                // add event listener
                element.style["animationName"] = "testAnimation";
                element.addEventListener('TransitionStart', transitionEvent_start, true);
                setTimeout("printCount()", 4000 + VARIANCE_ALLOWED + 100);
            }

        </script>
    </head>
    <body onload="startTest()">
        <p>Test passes if the blue square slides to the orange one and the value printed to the page for "Number of events" after the blue square stops moving is equal to 0.</p>
        <div id="animationEnd"></div>
        <div id="testDiv"></div>
        <div id="numEvents">Number of events: </div>
    </body>
</html>
